<template>
    <div>
        <div>
            <el-input class="searchInput" 
                    clearable
					@clear="keywordClear"
                    v-model="keyword"
                    placeholder="请输入公司关键字进行搜索..."
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search">
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
            <el-button icon="el-icon-plus" @click="showAddView" type="primary">添加基地</el-button> 
        </div>
        <div class="baseMain">
            <el-table
                    :data="bases"
                    border
                    stripe
					@selection-change="handleSelectionChange"
                    style="width:92%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <!-- <el-table-column
                    prop="id" label="编号" width="50">
                </el-table-column> -->
                <el-table-column
                    prop="name" label="公司名字" width="260">
                </el-table-column>
                <el-table-column
                    prop="city" label="所在城市" width="80">
                </el-table-column>
                <el-table-column
                    prop="location" label="公司地址" width="400">
                </el-table-column>
                <el-table-column
                    prop="phone" label="联系电话" width="130">
                </el-table-column>
                <el-table-column
                    prop="startTime" label="合作起始时间" width="120">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                            <el-button @click="showEditView(scope.row)" style="padding: 8px" size="small" type="primary">编辑</el-button>
                            <el-button @click="doDelete(scope.row)" style="padding: 8px" size="small" type="danger">删除</el-button>
                        </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-button size="small" @click="doDeleteSome" type="danger" icon="el-icon-delete" style="padding: 8px">批量删除</el-button>
                <el-pagination
                        background
						@current-change="currentChange"
						@size-change="sizeChange"
						:current-page="current"
						:page-size="size"
						:page-sizes="[10,20,40]"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
            </el-pagination>
        </div>
		
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" center :close-on-click-modal="false" :destroy-on-close="destroyOnClose">
            <div class="setForm">
                <el-form :model="baseInfo" :rules="rules" ref="baseForm" label-width="100px">                        
                    
                    <el-form-item label="公司名字" prop="name">
                        <el-input size="small" style="width:260px" prefix-icon="el-icon-edit" 
                            v-model="baseInfo.name" placeholder="请输入公司名字"></el-input>
                    </el-form-item>   
                    <el-form-item label="所在城市" >
                        <el-input size="small" style="width:170px" prefix-icon="el-icon-edit" 
                            v-model="baseInfo.city" placeholder="请输入公司所在城市"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址" >
                        <el-input size="small" type="textarea" v-model="baseInfo.location"
                            :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入公司地址"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" >
                        <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="baseInfo.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="合作开始时间" prop="startTime" label-width="110px">
                        <el-date-picker
                                        v-model="baseInfo.startTime"
                                        size="small"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        style="width: 180px;"
                                        placeholder="合作起始时间">
                                </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddOrEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                bases:[],
                baseInfo:{},
                keyword:'',
				multipleSelection: [],
                title: '',
                current: 1,
				size: 10,
				total: 0,
                dialogVisible: false,
				destroyOnClose: false,
                rules:{
                    name: [{required: true, message: '请输入公司名字', trigger: 'blur'}],
                    // city: [{required: true, message: '请输入公司所在城市', trigger: 'blur'}],
                    // location: [{required: true, message: '请输入公司地址', trigger: 'blur'}],
                    // phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
                    startTime: [{required: true, message: '请输入合作开始时间', trigger: 'blur'}],
                },
            }
        },
		mounted() {
			this.initBases();
		},
        methods: {
			initBases(){
				let url = '/base/info/?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.bases = resp.data;
						this.total = resp.total;
					}
				})
			},
			keywordClear(){
				this.current = 1;
				this.initBases();
			},
            doSearch(){
                this.current = 1;
                this.initBases();
            },
            doAddOrEdit(){
				if (this.baseInfo.id) {
					this.$refs['baseForm'].validate(valid => {
						if (valid) {
							this.putRequest("/base/info/", this.baseInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initBases();
								}
							})
						}
					});
				} else {
					this.$refs['baseForm'].validate(valid => {
						if (valid) {
							this.postRequest("/base/info/", this.baseInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initBases();
								}
							})
						}
					});
				}
            },
            doDelete(data){
				this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/base/info/" + data.id).then(resp => {
						if (resp) {
							this.initBases();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
            },
            doDeleteSome(){
				let ids = [];
				for (let data of this.multipleSelection) {
					ids.push(data.id);
				}
				this.$confirm('此操作将删除【' + ids.length + '】条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/base/info/" , ids).then(resp => {
						if (resp) {
							this.initBases();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
            },
			emptyBaseInfo(){
				this.baseInfo = {};
			},
            showAddView(){
				this.emptyBaseInfo();
                this.title = '添加基地';
                this.dialogVisible = true;
				this.destroyOnClose = true;
            },
			showEditView(data){
				this.title = '修改基地信息';
				this.baseInfo = data;
				this.dialogVisible = true;
			},
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
			currentChange(page){
				this.current = page;
				this.initBases();
			},
			sizeChange(value){
				this.size = value;
				this.initBases();
			},
        }
    }
</script>

<style scoped>
    .searchInput{
        width: 300px;
        margin-right: 8px;
    }
    .baseMain{
        margin-top: 10px;
    }
    .page{
        width: 92%;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
    }
	.setForm{
		display: flex;
		justify-content: flex-start;
	}
</style>